<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单聊</title>
    <style>
        #chats{
            width: 400px;height:300px;border:1px solid #ccc;float: left;
        }
        #online{
            width: 150px;height: 300px;border:1px solid #ccc;float: left;margin-left: 20px;
        }
    </style>
    <script src="webjars/jquery/jquery.min.js"></script>
    <script src="webjars/sockjs-client/sockjs.min.js"></script>
    <script src="webjars/stomp-websocket/stomp.min.js"></script>
    <script type="text/javascript">
        var stompClient = null;
        function connectWebSocket(){
            var url = "http://localhost:8080/webSocket"
            var socket = new SockJS(url)
            stompClient = Stomp.over(socket)
            stompClient.connect({},function (frame){

                stompClient.subscribe("/user/queue/receiveOne",function (msg){
                    showMsg(JSON.parse(msg.body))
                })
                stompClient.subscribe("/topic/receiveAll",function (data){
                    updateUsers(data)
                })
                stompClient.send("/app/sendAll",{},"I'm online")

            })
        }
        function showMsg(message){
            $("#chats").append("<div>"+message.from+": "+message.content+"</div>");
        }
        function updateUsers(data){
            var users = JSON.parse(data.body);
            var html = "";
            for(var i=0;i<users.length;i++){
            html += "<div onclick='setTo(this)'>"+users[i]+"</div>";
            $("#users").html(html)
            }
        }
        function sendMsg(){
            stompClient.send("/app/sendTo",{},
            JSON.stringify({
                'content':$("#content").val(),
                'to':$("#to").val()
            }))
        }
        function setTo(obj){
            $("#to").val(obj.innerText);
        }
        function checkData(){
            if($("#content").val()==""){
                alert("请输入聊天内容");
                return false;
            }
            if($("#to").val()==""){
                alert("请选择目标用户");
                return false;
            }
            var listUser = $("#users").text();
            var toUser = $("#to").val();
            if(listUser.indexOf(toUser)==-1){
                alert("目标用户不在线");
                return false;
            }
        }
        function setCurrentUser(){
            $.ajax({
                url:"getCurrentUser",
                success:function (data){
                    $("#currentUser").text(data)
                }
            })
        }
    function closeWebSocket(){
            if(stompClient!=null){
                stompClient.disconnect();
            }
    }
    $(function (){
        connectWebSocket();
        $("#send").click(function (){
            checkData();
            sendMsg();

        })
        setCurrentUser();
    })
    </script>
</head>
<body>
    <div>
        用户【<span id="currentUser"></span>】说：
        <input type="text" id="content" placeholder="请输入聊天内容">
        <input type="text" id="to" placeholder="目标用户">
        <button id="send" type="button">发送</button>
        &nbsp;<input type="button" id="disconnect" value="退出聊天" onclick="closeWebSocket()"/>
        <br>
        <div id="chats"></div>
        <div id="online">
            当前在线用户：
            <div id="users"></div>
        </div>
    </div>
</body>
</html>